<template>
  <div class="page1">
    <div class="ReadPageback">
      <div class="ReadPagebackx">
        <img src="../../assets/img/detailedVersion/x.png" alt="" @click="showX()">
      </div>
      <div class="zejd">
        <div>
          <img src="../../assets/img/detailedVersion/zrjdlL.png" alt="" />
        </div>
        <div>
          <img src="../../assets/img/detailedVersion/zrjdlR.png" alt="" />
        </div>
      </div>
      <div class="zejd1"></div>
      <!-- 页面内容 -->
      <div class="content" >
        <!-- 费用筹划 -->
        <div class="content_comc">
          <!-- 备忘录 -->
          <div class="memorandum">
            <div class="table_tit">
              <div>保障责任三级分布情况—{{ props.obj.firstBilityName }}</div>
              <div>单位(元)</div>
            </div>
            <div class="comc_table1">
              <table border="1" class="table_t tableBorderColor">
                <thead class="table_d">
                  <tr>
                    <th rowspan="2" class="fixedFirst fixedHeader">保障责任</th>
                    <th rowspan="2">小计</th>
                    <th v-for="(v, index) in dataFristName"
                    :key="index">{{v[0]}}</th>
                  </tr>
                  <tr class='table_dTr'>
                    <th v-for="(v, index) in dataFristName"
                    :key="index">{{v[1]}}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="table_tr">
                      <td class='trDataTd fixedFirst' v-for="(v, index) in dataSecondBilityName" :key="index">
                        <div class='trDataTdDiv'>{{v[0]}}</div>
                        <div class='trDataTdDiv'>
                          <div v-for="(a, b) in v[1]" :key="b" class='trDataTdDivChild'>{{a}}</div>
                        </div>
                      </td>
                      <!-- 小计 -->
                      <td class='trDataTdXj fixedFirstNeighbor'>
                          <div v-for="(v, index) in dataFristNameOne" :key="index" class='trDataTdDivChild1'>{{v}}</div>
                      </td>
                      <td class='trDataTdXj' v-for="(v, index) in dataFristName" :key="index">
                        <div v-for="(a, b) in v.slice(2,v.length)" :key="b" class='trDataTdDivChild1'>{{a}}</div>
                      </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <!-- 缴费曲线 -->
          <div class="memorandum">
            <div class="table_tit">
              <div>{{ props.obj.firstBilityName }}未来保障曲线</div>
              <div>单位(元)</div>
            </div>
            <div class="tableEchart">
              <EchartsLineS
                class="pieLine"
                :colorS="colorS"
                :yearData="yearData"
                :titleTest="titleData"
                :legendData="legendData"
              ></EchartsLineS>
            </div>
          </div>
          <div style="height: 3rem"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<!-- less嵌套设置 -->
<style lang="less" scoped>
.tbodyTr {
  border-right: 1px solid #DEDEDE  !important;
}

table {
  margin: 0;
  padding: 0;
  border-spacing: 0;
  border-collapse: separate;
  tbody {
    tr {
      &:nth-child(2n + 1) {
        td {
          background-color: transparent;
        }
      }
      &:nth-child(2n + 2) {
        td {
          background-color: #d9ecff;
        }
      }
    }
  }
}
.page1 {
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    overflow: hidden;
    position: absolute;
    transition: all 0.3s ease 0s;
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
  .ReadPageback {
    bottom: 0;
    width: 100%;
    height: 80%;
    overflow: auto;
    position: absolute;
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
    background: linear-gradient(180deg, #3296fa 0%, #fdfdfd 70%);
    .ReadPagebackx {
      width: 100%;
      z-index: 10000;
      display: flex;
      position: fixed;
      padding: 7px 10px;
      justify-content: flex-end;
      img {
        width: 23px;
        height: 23px;
        margin-top: 10px;
      }
    }
      .zejd {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px;
        z-index: 101;
        position: fixed;
        div:first-child {
          width: 60%;
          img{
            margin-left: 8%;
            height: 30px;
            width: auto;
            margin-top: 10%
          }
          @media (min-width: 500px) {
            img {
              height: 35px;
            }
        }
          @media (min-width: 600px) {
            img {
              height: 40px;
            }
        }
        }
        div:last-child {
          width: 40%;
          img{
            height: 80px;
            width: auto;
            margin-top: 50px;
          }
          @media (min-width: 400px) {
            img {
              height: 90px;
            }
        } 
          @media (min-width: 500px) {
            img {
              height: 100px;
            }
        } 
          @media (min-width: 600px) {
            img {
              height: 110px;
            }
        } 
         

      }
      }
      .zejd1 {
        width: 100%;
        height: 107px;
        // display: none;
        position: fixed;
        background: #3296fa;
        margin-top: -2px;
        border-top-left-radius: 17px;
        border-top-right-radius: 17px;
        z-index: 100 !important;
      }
      .content {
        margin-top: 100px;
        min-height: 530px;
        .content_top {
          width: 100%;
          height: 153px;
          display: flex;
          align-items: center;
          background: url(../../assets/img/detailedVersion/banner.png);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          img {
            width: 117px;
            height: 30px;
            margin-left: 21px;
          }
        }
        .content_comc {
          width: 93%;
          margin: 0 auto;
          overflow: hidden;
          min-height: 270px;
          font-weight: bold;
          border-radius: 10px;
          .combTop {
            width: 100%;
            display: flex;
            position: relative;
            justify-content: center;
            img {
              width: 221px;
              height: 44px;
            }
            div {
              top: 5px;
              font-size: 19px;
              color: #eff7ff;
              font-weight: bold;
              position: absolute;
            }
          }
          .memorandum {
            width: 100%;
            overflow: hidden;
            margin-top: 10px;
            border-radius: 10px;
            background: linear-gradient(180deg, #e5ecf3 0%, #fffffd 30%);
            .table_tit {
              display: flex;
              padding: 0 10px;
              font-size: 14px;
              margin-top: 17px;
              text-align: left;
              justify-content: space-between;
              span:last-child {
                font-size: 13px;
              }
            }
            .comc_table1 {
              width: 95% !important;
              overflow: auto;
              margin: 0 auto;
              .tdDiv {
                width: 100%;
                height: 30px;
                border-bottom: 1px solid #DEDEDE  !important;
                
              }
              .tdDiv:last-child {
                border: none !important;
              }
              .table_t {
                min-width: 85%;
                margin: 0 auto;
                margin-top: 10px;
                min-height: 100px;
                margin-bottom: 10px;
                border-bottom: 1px solid #DEDEDE  !important;
                th {
                  border-top: 1px solid #DEDEDE  !important;
                  border-left: 1px solid #DEDEDE  !important;
                }
                td {
                  border-top: 1px solid #DEDEDE  !important;
                  border-left: none  !important;
                }
                .tbh {
                  span:nth-child(1) {
                    font-size: 17px;
                  }
                  span:nth-child(2) {
                    font-size: 12px;
                  }
                }
                .table_tr {
                  font-size: 11px;
                  .trDataTd {
                    min-width: 210px;
                    display: flex;
                    align-items: center;
                    border-left: 1px solid #DEDEDE !important;
                    justify-content: space-between;
                    border-bottom: none !important;
                    .trDataTdDiv {
                      // display: -webkit-box;
                      // -webkit-box-orient: vertical;
                      // -webkit-line-clamp: 2;
                      overflow: hidden;
                      .trDataTdDivChild:nth-child(1){
                        // border-top: none;
                        border-top: 0px solid rgba(0, 0, 0, 0)  !important;
                        height: 47px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      }
                      .trDataTdDivChild {
                        border-top: 1px solid #DEDEDE  !important;
                        border-left: 1px solid #DEDEDE  !important;
                        height: 47px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      }
                    }
                    .trDataTdDiv:nth-child(1){
                      width: 39%;
                    }
                    .trDataTdDiv:nth-child(2){
                      width: 61%;
                    }
                  }
                  .trDataTdXj {
                    .trDataTdDivChild1:nth-child(1){
                        // border-top: none;
                        border-top: 0px solid rgba(0, 0, 0, 0)  !important;
                        height: 47px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      }
                    .trDataTdDivChild1 {
                        height: 47px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-top: 1px solid #DEDEDE  !important;
                    }
                  }
                  .trDataTdXj:last-child{
                    border-right: 1px solid #DEDEDE  !important;
                  }
                }
              }
              .table_d {
                border-radius: 10px;
                font-size: 12px;
                background: linear-gradient(to bottom, #529eec, #53a4f5);
                tr {
                  height: 43px;
                  color: #ffffff;
                  th {
                    text-align: center;
                    border: 1px solid rgba(255,255,255,.3);
                  }
                  th:last-child {
                    // border-top-right-radius: 10px;
                  }
                  th:first-child {
                    // border-top-left-radius: 10px;
                  }
                }
              }
            }
            @media (min-width: 750px) {
              .comc_table1{
                width: 100% !important;
              }
            }
            .tableEchart {
              width: 89%;
              // height: 200px;
              margin: 0 auto;
              .pieLine {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
  }
  .tableBorderColor{
      td{
        border: 1px solid #DEDEDE  !important;
        border-bottom: 1px solid #DEDEDE  !important;
      }
}
}
// 表格固定首列所需样式开始
// 表格固定首列暂时不做 1.0.16  241012
.fixedFirstNeighbor{
  border-left: none !important;
}
.fixedFirst{
  position: sticky;  
  left: 0;  
  z-index: 10; /* 确保固定列在其他内容之上 */  
  border-right: 1px solid #000;
  background-color: #fff !important;
}
.fixedHeader{
  background-color: #54a2ef !important;
}
// 表格固定首列所需样式结束
</style>


<script lang="ts" setup name="detailedVersionread">
import { Toast } from "/@/utils/Message";
import { onMounted } from "vue";
import { ref, reactive, computed, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  getDetailRead,
  getDetailReadisCodeSm,
	jstJointLogin,
	letterControllerjstUrl
} from "/@/api/auth/simpleVersion.ts";
import customNavBar from "/src/components/NavBar/customNavBar.vue";
import EchartsLineS from "/src/components/Echarts/echartsLineS.vue";
import { interactive } from "/@/assets/js/interactive"
const router = useRouter();
const route = useRoute();
const leftTetx = ref("");
const titleTest = ref(" ");
const colorS = ref(["#C1EBDD", "#FFC851", "#5A5476", "#1869A0"]);
let dataFristName:any = ref([])
let dataFristNameOne:any = ref([])
let dataSecondBilityName:any = ref({})
let dataTertiaryBilityName:any = ref({})
let legendData: any = reactive([]);
let yearData: any = reactive([]);
const titleData: any[] = reactive([]);
let tableData: any = reactive([]); //A,B,C身故，全残，伤残表格数据
let tableDatas: any = reactive([]); //A,B,C身故，全残，伤残表格数据
let DtableData: any = reactive([]); //D疾病表格数据
let DtableDatas: any = reactive([]); //D疾病表格数据
let EtableData: any = reactive([]); //E医疗表格数据
let EtableDatas: any = reactive([]); //E医疗表格数据
let FtableData: any = reactive([]); //F生存金责任
let FtableDatas: any = reactive([]); //F生存金责任
let GtableData: any = reactive([]); //G其他责任
let GtableDatas: any = reactive([]); //G其他责任
const list1 = ref([
  {
    name: "责任",
    content1: [{ aa: "k1" }, { aa: "k1" }, { aa: "k1" }, { aa: "k1" }],
    n: "k3",
  },
  {
    name: "责任",
    content1: [],
    n: "k3",
  },
  {
    name: "责任",
    content1: [],
    n: "k3",
  },
]);
const props = defineProps(['obj'])

onMounted(() => {
  sessionStorage.setItem("showOverlay", "false");
  nextTick(() => {
      getDetailReads();
  });
});
// 计算各表数据的合计
const sum = computed(() => {
  return (data: [], name: string) => {
    let val = 0;
    data.forEach((element) => {
      val += element[name];
    });
    return val;
  };
});
// props.obj.firstBilityCode
let getDetailReads = () => {
  if (props.obj.isYsc == 1 ? true : false || props.obj.face) {
    getDetailReadisCodeSm({
      taskCode: props.obj.taskCode,
      firstBilityCode: props.obj.firstBilityCode,
      userType: props.obj.userType,
    }).then((rest: any) => {
      if (rest.code == "402") {
        // 金世通来的掉联合登录
					jstJointLogin({ taskCode: route.query.taskCode, token: route.query.token}).then(
						(res: any) => {
							if (res.code == 200) {
								sessionStorage.removeItem('customToken')
								sessionStorage.setItem('customToken', res.customToken)
                getDetailReads()
							}  else if (res.code == 40201) {
								//  去金世通返回链接
                // 退出登录并跳转登录页面
										sessionStorage.clear()
									interactive({
										method:"reLogin",
										data:{
											code:'901',
											msg:''
										}
									})
								// letterControllerjstUrl({}).then((a: any) => {
								// if (a.code == 200) {
                  
								// 	// Toast('跳转金事通页面')
								// 	// window.location.href = `${a.jstUrl}`;
								// }
								// });
							}
						}
					)
        // Toast("您好，当前状态已失效，请您再次登录或重新打开服务连接"); // ? 还是去金事通
        return;
      }
      if(rest.code == 200 ){
        // 处理合并单元格
          dataFristName.value = rest.data?.tertiaryDistribution.data
          dataFristNameOne.value = JSON.parse(JSON.stringify(rest.data.tertiaryDistribution.data.pop()))
          dataFristNameOne.value.splice(0,2)
          dataSecondBilityName.value = rest.data?.tertiaryDistribution.secondBilityName
          dataTertiaryBilityName.value = rest.data?.tertiaryDistribution.tertiaryBilityName.map((v:any)=>{
            return v = v+'(万元)'
          })

          yearData.push(...rest.data.futureGuaranteeCurve?.year);
          legendData.push(...rest.data.futureGuaranteeCurve?.tertiaryBilityName);
          titleData.push(...rest.data.futureGuaranteeCurve?.data);
      }
    });
  } else {
    // 不扫码
    getDetailRead({
      taskCode: props.obj.taskCode,
      firstBilityCode: props.obj.firstBilityCode,
      userType: props.obj.userType,
    }).then((res: any) => {
      // 处理合并单元格
      dataFristName.value = res.data?.tertiaryDistribution.data
      dataFristNameOne.value = JSON.parse(JSON.stringify(res.data.tertiaryDistribution.data.pop()))
      dataFristNameOne.value.splice(0,2)
      dataSecondBilityName.value = res.data?.tertiaryDistribution.secondBilityName
      dataTertiaryBilityName.value = res.data?.tertiaryDistribution.tertiaryBilityName.map((v:any)=>{
        return v = v+'(万元)'
      })

      yearData.push(...res.data.futureGuaranteeCurve?.year);
      legendData.push(...res.data.futureGuaranteeCurve?.tertiaryBilityName);
      titleData.push(...res.data.futureGuaranteeCurve?.data);
     
    });
  }
};
const $emit = defineEmits<{
  (e: "sendParent", data: any): void;
}>();
const showX = () => {
  $emit("sendParent", false);
}
</script>


